<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>销售记录</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="css/membership.css">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/vant.css">
    <script src="js/fontsize.js"></script>
    <script src="js/vue/vue.js"></script>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/vue/axios.js"></script>
    <script src="js/jquery.md5.js"></script>
    <script src="js/vue/vant.js"></script>
    <script src="js/moment.js"></script>
    <script src="js/flexible.js"></script>
    <script src="js/vue/qs.js"></script>
    <script src="js/fontsize.js"></script>
    <script src="js/glabe.js"></script>
    <style>
        .container_box {
            font-size: 0.14rem;
        }
    </style>
</head>

<body>
    <div class="container_box sales_record_page" id="app">
        <header>
            <div class="staff_info">
                <span class="name">{{name}}</span>
                <span>共{{usercount}}条</span>
                <span>销售金额：￥{{acamount_sum}}</span>
            </div>
            <div class="search bar3">
                <form @submit.prevent action="#">
                    <input @keyup.enter.native="search" v-model="from.keyword" type="search" placeholder="搜索会员姓名/手机号码">
                    <button @click="search" type="text"></button>
                </form>
            </div>
        </header>
        <template>
            <!-- <div v-for="item in listData" class="group_details group_details_state clearfix">

            </div> -->
            <div class="my_table">
                <table cellspacing="0" style="width:100%" class="table">
                    <tr>
                        <th class="th" v-for="(item, index) in tableTitleArr" :key="index">{{ item }}</th>
                    </tr>
                    <tr v-for="(item, index) in card_list" :key="index" class="list-tr">
                        <td>{{ item.Username }}</td>
                        <td>{{ item.Cardname }}</td>
                        <td>{{ item.Cardtype_name }}</td>
                        <td>{{ item.Acamount }}</td>
                        <td>{{ item.Paytype }}</td>
                        <td>{{ item.Paytime }}</td>
                    </tr>
                </table>
            </div>
            <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="getList">
                <van-cell v-for="item in lists" :key="item.Csid" :title="item" />
            </van-list>
        </template>
    </div>
</body>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            //员工列表
            listData: [],
            from: {
                keyword: '',
                page: '1',
                Sid: '',
            },
            lists: [],
            loading: false,
            finished: false,
            totalnum: '',
            totalpage: '',
            listd: [],

            //表头
            tableTitleArr: ["会员", "会员卡", "卡类型", "支付金额", "支付方式", "支付时间"],
            //员工名称
            name: "",
            //员工	会员总数
            usercount: "0",
            //员工  销售总金额
            acamount_sum: "",
            //表格数据
            card_list: [],

        },
        created() {
            //获取路由参数
            let id = getUrlQueryString('id')
            let name = getUrlQueryString('name')
            this.from.Sid = id;
            this.name = name;
            console.log(id, name)
            if (!id) {
                vant.Toast('参数错误');
            }
        },
        methods: {
            //获取员工列表
            getList() {
                const params = this.from;
                console.log(params)
                axios.get('mobileapi/boss/staff.php?act=staff_sales', { params }).then(res => {
                    let { msg, code } = res.data;
                    if (code !== 200) {
                        vant.Toast('请求发送失败，请重试')
                    } else {
                        data = res.data
                        console.log(data);
                        this.usercount = data.data.totalnum;
                        this.acamount_sum = data.data.Acamount_sum;
                        let card_list = data.data.card_list
                        // card_list.forEach(item => {
                        //     item.AddtimeText = moment(Number(item.Addtime)).format("MM-DD HH:mm");
                        // })
                        this.card_list = this.card_list.concat(card_list)
                        this.from.page = parseInt(data.data.page) + 1
                        // 加载状态结束
                        this.loading = false
                        // 数据全部加载完成
                        if (this.card_list.length >= data.data.totalnum) {
                            this.finished = true
                        }
                    }
                }).catch(err => {
                    console.log(err)
                    vant.Toast('请求发送失败，请重试');
                })
            },
            //搜索
            search() {
                this.card_list = [];
                this.from.page = '1'
                this.getList()
            }
        },
    })
</script>

</html>